<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Monitor</title>
<link rel="stylesheet" type="text/css" href="/static/js/extjs/resources/css/ext-all.css" />
<!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="/static/js/extjs/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->
        <script type="text/javascript" src="/static/js/extjs/ext-all.js"></script>
        <script type="text/javascript" src="/static/js/extjs/examples/ux/TableGrid.js"></script>
		<link rel="stylesheet" type="text/css" href="/static/js/extjs/examples/grid/grid-examples.css" />
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="/static/js/extjs/examples/shared/examples.css" />
        <style type="text/css">
        #the-table { border:1px solid #bbb;border-collapse:collapse; }
        #the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
        </style>
		
	<script type="text/javascript" src="/static/js/sortabletable.js"></script> 
	<link type="text/css" rel="StyleSheet" href="/static/css/sortabletable.css" />
	
</head>
<body>
<script type="text/javascript">
	function setColors(elem,old_value){
		//===stylesheets control!==========
		var elem_value = elem.dom.innerText;
		
		if (elem_value.indexOf("%")>-1){
			elem_value = elem_value.substring(0,elem_value.length-1);
			elem_value = parseFloat(elem_value);
			
			if (elem_value > 0){
				elem.dom.style.backgroundColor="#C5FFAD";
			}else{
				elem.dom.style.backgroundColor="#FFADBB";
			}				
		}else{
			if (elem_value != old_value){
				elem.dom.style.backgroundColor="#FDFFCC";
			}else{
				elem.dom.style.backgroundColor="transparent";
			}			
		}

	}
	
	function setAlertColor(elem){
		//var elem_value = elem.dom.innerText;
		
		elem.dom.style.backgroundColor="#FDFFCC";
	}
	
	function ajaxGrid() {
        Ext.Ajax.defaultHeaders = {
            'Accept': 'application/json'
        };
        var resp = Ext.Ajax.request({
            //url: '/TestGrid/TNLP3/',
			url: '/monitor_test/',
            method: 'GET',
            success: function(resp) {
                var item = Ext.decode(resp.responseText);
				var item_row = String(item).split("#,");
				//var testDiv = Ext.get('test');
				//testDiv.update(item_row.length);
				for (i in item_row){
					
					var item_fields = String(item_row[i]).split(",");
					
                    //alert(String(item_row[i]));
                    var td_names_arr = new Array("ativo_cod","porc","abertura","max","min","ultimo","oferta_compra","volume","min_forever","max_forever");
					
					for (j in td_names_arr){
						var elem = Ext.get(td_names_arr[j] + "_" + item_fields[0]);						
						if (elem!=null){
							var curr_value = elem.dom.innerText;
							elem.update(item_fields[j]);
							setColors(elem,curr_value);
						}
					}
					
				}
            },
            failure: function() {
                Ext.Msg.alert('Falha na Conexao!');
            },
        });

    }
		
	function TableGrid(){
		var grid = new Ext.ux.grid.TableGrid("the-table", {
			stripeRows: true // stripe alternate rows
		});
		grid.render();
	}

	//TableGrid();
	setInterval('ajaxGrid();', 5000);

</script>
<table class="sort-table" cellspacing="0" id="the-table">
	<thead>
            <tr style="background:#eeeeee;">
{% for field in fields %}			
			<td>{{ field.0 }}</td>
{% endfor %}				
            </tr>
	</thead>
	<tbody>
{% for row in response %}    
	<tr>       
    <td id="{{ fields.0.0 }}_{{ row.0 }}">{{ row.0 }}</td>    
	<td id="{{ fields.1.0 }}_{{ row.0 }}">{{ row.1 }}</td> 	
	<td id="{{ fields.2.0 }}_{{ row.0 }}">{{ row.2 }}</td> 
	<td id="{{ fields.3.0 }}_{{ row.0 }}">{{ row.3 }}</td> 
	<td id="{{ fields.4.0 }}_{{ row.0 }}">{{ row.4 }}</td> 
	<td id="{{ fields.5.0 }}_{{ row.0 }}">{{ row.5 }}</td> 
	<td id="{{ fields.6.0 }}_{{ row.0 }}">{{ row.6 }}</td> 
	<td id="{{ fields.7.0 }}_{{ row.0 }}">{{ row.7 }}</td> 
	<td id="{{ fields.8.0 }}_{{ row.0 }}">{{ row.8 }}</td> 
	<td id="{{ fields.9.0 }}_{{ row.0 }}">{{ row.9 }}</td> 	
	</tr>   
{% endfor %}
	</tbody>
</table>

<script type="text/javascript"> 
//<![CDATA[
 
var st = new SortableTable(document.getElementById("the-table"),
	["String", "String", "None", "None", "None", "None", "None", "None", "None", "None"]);
 
// restore the class names
st.onsort = function () {
	var rows = st.tBody.rows;
	var l = rows.length;
	for (var i = 0; i < l; i++) {
		removeClassName(rows[i], i % 2 ? "odd" : "even");
		addClassName(rows[i], i % 2 ? "even" : "odd");
	}
};
 
 
//]]>
</script> 

	<div id="test">
	</div>
	
</body>
</html>